<template>
	<view class="common_list">
		<view class="head_tle">
			<view class="leftTle" v-if="options.header.left">
				{{ dataItem[options.header.left.key] | codeList(options.header.left.codeListFilter) | filter(options.header.left.filter)}}
			</view>
			<view class="rightTle" v-if="options.header.right">
				{{ dataItem[options.header.right.key] | codeList(options.header.right.codeListFilter) | filter(options.header.right.filter) }}
			</view>
		</view>
		<view class="listOpt_data">
			<view class="item" v-for="(item,index) in options.listOpt.data">
				<view class="left">
					{{item.name}}
				</view>
				<view class="right">
					{{ dataItem[item.key] }}
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		props: {
			options: {
				type: Object,
				default: {}
			},
			dataItem: {
				type: Object,
				default: {}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.common_list {
		padding: 20rpx 40rpx;
		margin: 40rpx 0;
		background-color: #fff;

		.head_tle {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f3f3f3;

			view {
				display: flex;
				flex: 1;
			}

			.leftTle {
				font-size: 50rpx !important;
				font-weight: 600;
			}

			.rightTle {
				justify-content: flex-end;
				color: #3B71E8;
			}

		}

		.listOpt_data {
			padding-top: 40rpx;
			.item {
				display: flex;
				view{
					flex: 1;
				}
				.right {
					display: flex;
					justify-content: flex-end;
					color: #3B71E8;
				}
			}

		}
	}
</style>
